<template>
    <!-- <div class="w-full">
        <el-form :inline="true" :model="formInline" class="w-full h-10">
            <el-form-item label="医生姓名">
                <el-input v-model="formInline.doctorName" placeholder="医生姓名" clearable class="w-40"/>
            </el-form-item>
            <el-form-item label="开始日期">
                <el-date-picker
                    v-model="formInline.startDate"
                    type="date"
                    placeholder="开始日期"
                />
            </el-form-item>
            <el-form-item label="结束日期">
                <el-date-picker
                    v-model="formInline.endDate"
                    type="date"
                    placeholder="结束日期"
                />
            </el-form-item>
            <el-form-item label="时间段">
                <el-select
                    v-model="formInline.timeId"
                    placeholder="选择时间段"
                    clearable
                    class="w-60"
                >
                    <el-option
                        v-for="item in formInline.timeX"
                        :key="item.id"
                        :value="item.time"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
        </el-form>
    </div> -->
    <!-- 表格显示 -->
    <el-table :data="tableData" style="width: 100%" border height="60vh" highlight-current-row>
        <!-- <el-table-column fixed type="selection" width="50" /> -->
        <el-table-column prop="visitId" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="projectName" label="项目名称"  align="center"></el-table-column>
        <el-table-column prop="price" label="价格"  align="center"></el-table-column>
        <el-table-column prop="createTime" label="时间"  align="center"></el-table-column>
        <el-table-column prop="creater" label="医生"  align="center"></el-table-column>
        <el-table-column prop="havePay" label="缴费状态"  align="center">
            <template #default="scope">
                <el-tag v-if="scope.row.havePay == '1'" type="success"  class="cursor-pointer">已支付</el-tag>
                <el-tag v-else type="primary" class="cursor-pointer" @click="toPay(scope.row)">进行支付</el-tag>
            </template>
        </el-table-column>
    </el-table>
    <!-- <div class="flex justify-center items-end w-full h-16 mt-2">
        <el-pagination
            v-model:current-page="pageForm.currentPage"
            v-model:page-size="pageForm.pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageForm.total"
            />
            <el-switch v-model="background" class="ml-2" />
    </div> -->
    <!-- 弹出对话框 -->
    <el-dialog v-model="dialogVisible" title="支付中...." width="400" :before-close="handleClose">
        <el-form :model="payForm" label-width="auto" class="w-full">
            <el-form-item label="项目名称">
                <el-text class="w-40">{{ payForm.projectName }}</el-text>
            </el-form-item>
            <el-form-item label="医生姓名">
                <el-text class="w-40">{{ payForm.creater }}</el-text>
            </el-form-item>
            <el-form-item label="时间">
                <el-text class="w-40">{{ payForm.createTime }}</el-text>
            </el-form-item>
            <el-form-item label="费用">
                <el-text class="w-40">{{ payForm.price }}</el-text>
            </el-form-item>
            <el-form-item label="支付方式">
                <el-select
                v-model="payForm.method"
                placeholder="选择支付方式"
                clearable
                class="w-60">
                    <el-option value="0" label="微信支付"></el-option>
                    <el-option value="1" label="支付宝支付"></el-option>
                </el-select>
            </el-form-item>
            这里有一个支付的图片，需要支付模块
            <el-form-item>
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="payCome">
                    确定支付
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { computed, ref, reactive } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { getProjectList, payForProjectX } from '@/api/patient/pay.js'
// 表格数据
let tableData = ref([
    {id:1,doctorName:"张三",time:"2004-05-27 10:32:33",projectName: "验血1",departmentName:"科室1",price:"100",havePay:true},
    {id:2,doctorName:"李四",time:"2004-05-27 10:32:33",projectName: "验血2",departmentName:"科室2",price:"200",havePay:false},
    {id:3,doctorName:"王五",time:"2004-05-27 10:32:33",projectName: "验血3",departmentName:"科室3",price:"300",havePay:true},
    {id:4,doctorName:"赵六",time:"2004-05-27 10:32:33",projectName: "验血4",departmentName:"科室4",price:"400",havePay:false}
])
// 对话框可见
const dialogVisible = ref(false)
// 背景
const background = ref(false)
// 页面
const pageForm = ref({
    currentPage: 1,
    pageSize: 10,
    total: 50
})
const formInline = reactive({
  doctorName: "",
  timeX: [
    {id: 1, time: '8:00 - 9:00'},
    {id: 2, time: '9:00 - 10:00'},
  ],
  startDate: "",
  endDate: "", 
  timeId: ""
})
const pageSearch = computed(() => {
  return {
    page: pageForm.currentPage,
    limit: pageForm.pageSize,
    doctorName: formInline.doctorName,
    timeId: formInline.timeId,
  }
})
// 支付表单
const payForm = reactive({
    relatedId: "",
    doctorName: "",
    price: "",
    method: ""
})


initData()
// 初始化方法
function initData(){
    getProjectList().then(res =>{
        console.log(res)
        // 初始化表格数据
        tableData.value = res.data
        // pageForm.total = res.data.totalCount
        // pageForm.currentPage = res.data.currPage
        // pageForm.pageSize = res.data.pageSize
    })
}


const onSearch = () => {
//   console.log(pageSearch)
    initData()
}
// // 获取详细信息
// function getInfo(row){
//     dialogInfoVisible.value = true
//     console.log(row)
// }

const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  initData()
}
const handleCurrentChange = (val) => {
  // console.log(`current page: ${val}`)
  initData()
}
// 进行预约
const toPay = (row) => {
  console.log("进行支付")
  console.log(row)
  // 设置可见
  dialogVisible.value = true
  payForm.visitId = row.visitId
  payForm.projectId = row.projectId
  payForm.projectName = row.projectName
  payForm.price = row.price
  payForm.createTime = row.createTime
  payForm.method = "0"
  payForm.creater = row.creater
  console.log(payForm)
}


const handleClose = () => {
  ElMessageBox.confirm('你确定取消支付吗？',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
        dialogVisible.value = false
        ElMessage({
            type: 'success',
            message: "已取消",
        })
    })
    .catch(() => {
      
    })
}
// 确定预约
const payCome = () => {
  console.log("确认支付")
  dialogVisible.value = false
  const data = {
    visitId: payForm.visitId,
    projectId: payForm.projectId,
    method: payForm.method
  }
  payForProjectX(data).then(res=>{
    console.log(res)
    if(res.code == 200){
        ElMessage({
            type: 'success',
            message: "支付成功",
        })
        initData()
    }
  })
  
}

</script>

<style scoped>

</style>